import Search from '@/components/Search';
import { displayModuleList } from '@/services/displayModule';
import { slideshowList } from '@/services/slideshow';
import React, { useEffect, useState } from 'react';
import DisplayModule from './components/DisplayModule';
import Slideshow from './components/Slideshow';
import styles from './index.less';

const index: React.FC = () => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [slideshow, setSlideshow] = useState<any[]>([]);
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [displayModule, setDisplayModule] = useState<any[]>([]);
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    const fetchData = async () => {
      try {
        const slideshowRes = await slideshowList();
        const displayModuleRes = await displayModuleList();
        if (slideshowRes.success) {
          setSlideshow(slideshowRes.data.slideshow);
        }
        if (displayModuleRes.success) {
          setDisplayModule(displayModuleRes.data.displayModule);
        }
      } catch (error) {
        console.error('Error fetching:', error);
      }
    };
    fetchData();
  }, []);

  const handleSearchValue = (value: string) => {
    console.log(value);
  };

  return (
    <div className={styles.container}>
      <div className="search">
        <Search placeholder="请输入菜品" onSearchValue={handleSearchValue} />
      </div>
      <div className="slideshow">
        <Slideshow slideshowData={slideshow} />
      </div>
      <div className={styles.body}>
        <DisplayModule displayModuleData={displayModule} />
      </div>
    </div>
  );
};

export default index;
